<template>
    <div class="OperationalData-box">
        <div class="box-header">
            <h5>经营数据统计</h5>
            <div class="timeQuery">
                <p v-for="(item, index) in  timeData " :class="{ 'active': activeTime === index }"
                    @click="activeTime = index">{{ item.time }}</p>
            </div>
        </div>
        <div ref="target" class="content"></div>
    </div>
</template>
<script setup>
import * as echarts from "echarts";
import { ref, onMounted, watch } from "vue";
let activeTime = ref(0)
let timeData = ref([
    {
        time: '年度',
        i: 0
    },
    {
        time: '季度',
        i: 1
    },
    {
        time: '月度',
        i: 2
    }
])
// const props = defineProps({
//     data: {
//         type: Object,
//         required: true,
//     },
// });
let target = ref(null);
let myChart = null;
onMounted(() => {
    myChart = echarts.init(target.value);
    renderChart();
});
// watch(
//   () => props.data,
//   () => {
//     renderChart();
//   }
// );
// x轴数据
const xAxisData = ['2021', '2022', '2023', '2024']
// legend图例数据
const legends = ['月度目标', '已完成', '回款']

// 数据源
const data1 = [12, 8, 4, 7]
const data2 = [8, 6, 2, 3]
const data3 = [4, 3, 1, 2]





const labelOption = {
    show: true,
    position: 'top'
};
const options = {
    grid: [
        // 柱状图的grid
        {
            left: '0%',
            right: '0%',
            top: '20%',
            bottom: '10%',
            containLabel: true,
        }

    ],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        icon: 'rect',
        itemWidth: 12,
        itemHeight: 12,
        data: legends,
        show: true,
        top: '10%',
        textStyle: {
          fontSize: 16
        }
    },
    xAxis: [
        // 柱状图的x轴
        {
            type: 'category',
            axisTick: { show: false },
            data: xAxisData,
            axisLabel: {
                show: false,
                color: '#333',
                fontSize: 12,
            },

        },
        {
            type: 'category',
            position: 'bottom',
            data: xAxisData
        },
    ],
    yAxis: [
        // 柱状图的y轴
        {
            type: 'value',
            splitLine: { show: true }
        }
    ],
    series: [
        {
            name: legends[0],
            xAxisIndex: 0,
            yAxisIndex: 0,
            gridIndex: 0,
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
                focus: 'series'
            },
            data: data1,
            itemStyle: {
                color: '#4874cb',
            },
            barGap: '50%',
        },
        {
            name: legends[1],
            xAxisIndex: 0,
            yAxisIndex: 0,
            gridIndex: 0,
            type: 'bar',
            label: labelOption,
            emphasis: {
                focus: 'series'
            },
            data: data2,
            itemStyle: {
                color: '#ee822f',
            },
        },
        {
            name: legends[2],
            xAxisIndex: 0,
            yAxisIndex: 0,
            gridIndex: 0,
            type: 'bar',
            label: labelOption,
            emphasis: {
                focus: 'series'
            },
            data: data3,
            itemStyle: {
                color: '#f2ba02',
            },
        },
    ]
};

const renderChart = () => {
    myChart.setOption(options);

    // 图表自适应
    window.addEventListener('resize', () => {
        myChart.resize()
    })
};
</script>
<style scoped lang='scss'>
.OperationalData-box {
    width: 100%;
    height: 100%;
    cursor: pointer;

    h5 {
        position: relative;
        font-family: PingFang SC, PingFang SC;
        font-weight: black;
        font-size: 20px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        font-weight: 600;
        padding-left: 30px;
        margin: 40px 0;


        &::after {
            content: '';
            width: 5px;
            height: 20px;
            background-color: #1947FF;
            border-radius: 5px;
            position: absolute;
            left: 20px;
            top: 0px;
        }



    }

    .box-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 80px;

        .timeQuery {
            border: 1px solid #707070;
            width: 135px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: 2px 2px 2px 2px;

            p {
                width: 194px;
                height: 28px;
                text-align: center;
                line-height: 28px;
            }

            .active {
                background: #E2E7FF;
                box-shadow: inset -1px -1px 2px 1px rgba(0, 0, 0, 0.16);
                border-radius: 2px 2px 2px 2px;
                color: #1947FF;
            }
        }
    }

    .content {
        width: 100%;
        height: calc(100% - 86px);
    }
}
</style>
